<!doctype html>
<html class="no-js">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>modeler-list</title>
	<meta name="description" content="">
	<meta name="viewport"
		content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
	<script src="../editor-app/app-cfg.js"></script>
	<link rel="stylesheet" href="../editor-app/libs/bootstrap_3.1.1/css/bootstrap.min.css" />
	<script src="../editor-app/libs/jquery_1.11.0/jquery.min.js"></script>
	<script src="../editor-app/libs/angular_1.2.13/angular.min.js"></script>
	<script src="../editor-app/libs/bootstrap_3.1.1/js/bootstrap.min.js"></script>
	<style type="text/css">
		td,
		th {
			text-align: center;
			vertical-align: middle !important;
		}

		body {
			padding: 15px;
		}

		.header {
			text-align: right;
			margin-bottom: 10px;
		}
	</style>
</head>
</head>

<body ng-app="ProcessListApp" ng-controller="ProcessListCtrl">
	<div class="header">
		<div class="row">
			<div class="col-md-1">
				<label> key：</label>
			</div>
			<div class="col-md-2">
				<select class="form-control" ng-model="key">
					<option ng-repeat="keyItem in keys" value="{{keyItem.code}}">{{keyItem.name}}</option>
				</select>
			</div>
			<div class="col-md-1">
				<label> 分类：</label>
			</div>
			<div class="col-md-2">
				<select class="form-control" ng-model="category">
					<option ng-repeat="categoryItem in categorys" value="{{categoryItem.code}}">{{categoryItem.name}}
					</option>
				</select>
			</div>
			
			<div class="col-md-1">
				<label>流程发起人编码：</label>
			</div>
			<div class="col-md-2">
				<input class="form-control" placeholder="发起流程是设置流程发起人使用" ng-model="startedBy" />
			</div>
			<div class="col-md-2">
				<button type="button" class="btn btn-primary" ng-click="query()">
					查&nbsp;&nbsp;询
					<span class="glyphicon glyphicon-search"></span>
				</button>
			</div>
		</div>

	</div>

	<table class="table table-bordered">
		<thead>
			<tr>
				<th width="50px">#</th>
				<th width="100px">id</th>
				<th style="text-align: left;">名称</th>
				<th width="250px">版本</th>
				<th width="250px">key</th>
				<th width="250px">状态</th>
				<th width="250px">范畴、种类</th>
				<th width="400px">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat=" dataItem in dataList ">
				<td ng-bind="$index+1">1</td>
				<td>{{dataItem.id}}</td>
				<td style="text-align: left;">{{dataItem.name}}</td>
				<td>{{dataItem.version}}</td>
				<td>
					<span ng-if="dataItem.key=='public'" title="{{dataItem.key}}">
						通用
					</span>
					<span ng-if="dataItem.key=='BX_RC'" title="{{dataItem.key}}">
						日常报销
					</span>
					<span ng-if="dataItem.key=='BX_CL'" title="{{dataItem.key}}">
						差旅报销
					</span>
					<span ng-if="dataItem.key=='QJ_RC'" title="{{dataItem.key}}">
						日常请假
					</span>
				</td>
				<td>
					<span ng-if="dataItem.suspensionState==1" title="{{dataItem.key}}">
						激活
					</span>
					<span ng-if="dataItem.suspensionState==2" title="{{dataItem.key}}">
						挂起
					</span>
				</td>
				<td>
					<span ng-if="dataItem.category=='public'" title="{{dataItem.category}}">
						通用
					</span>
					<span ng-if="dataItem.category=='FL_ONE'" title="{{dataItem.category}}">
						分类一
					</span>
					<span ng-if="dataItem.category=='FL_TWO'" title="{{dataItem.category}}">
						分类二
					</span>
				</td>
				<td>
					<button type="button" class="btn btn-danger" ng-click="deletePro(dataItem.deploymentId)">删除</button>
					<button type="button" class="btn btn-success" ng-click="startProcess(dataItem.key)">发起流程</button>
					<button type="button" class="btn btn-success" ng-if="dataItem.suspensionState==1"
						ng-click="updateState(dataItem.id,2)">挂起</button>
					<button type="button" class="btn btn-success" ng-if="dataItem.suspensionState==2"
						ng-click="updateState(dataItem.id,1)">激活</button>
				</td>
			</tr>
		</tbody>

	</table>

	<script>
		var app = angular.module('ProcessListApp', []);
		app.controller('ProcessListCtrl', function ($scope, $http) {
			$scope.keys = [
				{code: "", name: "查询所有"},
				{code: "public", name: "通用"},
				{code: "BX_RC", name: "日常报销"},
				{code: "BX_CL", name: "差旅报销"},
				{code: "QJ_RC", name: "日常请假"}
			];
			$scope.categorys = [
				{code: "", name: "查询所有"},
				{code: "public", name: "通用"},
				{code: "FL_ONE", name: "分类一"},
				{code: "FL_TWO", name: "分类二"}
			];

			$scope.key;
			$scope.category;
			$scope.startedBy;


			$scope.dataList = [];
			//请求数据
			$scope.query = function () {
				$scope.dataList = [];
				var url = "/define/list?page=1&pageSize=15000000";
				if ($scope.key) {
					url += "&key=" + $scope.key;
				}
				if ($scope.category) {
					url += "&category=" + $scope.category;
				}
				$http({
					method: 'GET',
					url: url
				}).then(function successCallback(response) {
					if (response.status == 200 && response.data.code == 0) {
						$scope.dataList = response.data.data;
						console.log($scope.dataList);
					} else {
						alert("查询失败！" + response.data.data);
						console.error(response);
					}
				}, function errorCallback(response) {
					console.error(response);
				});
			}
			$scope.query();


			$scope.startProcess = function (key) {
				var url="/define/startProcessInstanceByKey?key=" + key;
				if($scope.startedBy){
					url+="&assignee="+$scope.startedBy;
				}
				$http({
					method: 'GET',
					url: url
				}).then(function successCallback(response) {
					if (response.status == 200 && response.data.code == 0) {
						alert("发起流程成功！");
					} else {
						alert("发起流程失败！" + response.data.data);
						console.error(response);
					}
				}, function errorCallback(response) {
					console.error(response);
				});
			}

			$scope.deletePro = function (deploymentId) {
				$http({
					method: 'GET',
					url: "/define/delete?deploymentId=" + deploymentId
				}).then(function successCallback(response) {
					if (response.status == 200 && response.data.code == 0) {
						$scope.query();
					} else {
						alert("删除失败！" + response.data.data);
						console.error(response);
					}
				}, function errorCallback(response) {
					console.error(response);
				});
			}

			//挂起或者激活
			$scope.updateState = function (processInstanceId, state) {
				$http({
					method: 'GET',
					url: "/define/update?id=" + processInstanceId + "&state=" + state
				}).then(function successCallback(response) {
					if (response.status == 200 && response.data.code == 0) {
						$scope.query ();
					} else {
						alert("挂起/激活失败！" + response.data.data);
						console.error(response);
					}
				}, function errorCallback(response) {
					console.error(response);
				});
			}

		});
	</script>
</body>

</html>